<template>
  <div class='db-play-box'>
    <!-- 上一首插槽 -->
    <div @click='pre' v-if='left'>
      <slot name='pre'>
        <i class='db-pre icon iconfont icon-pre'></i>
      </slot>
    </div>
    <!-- 播放按钮插槽 -->
    <div @click='StartPlay'>
      <slot :pause='paused'>
        <div class='db-icon-box'>
          <i class='db-start icon iconfont icon-bofang' v-show='paused'></i>
          <i class='db-stop icon iconfont icon-zanting' v-show='!paused'></i>
        </div>
      </slot>
    </div>
    <!-- 下一首插槽 -->
    <div @click='next' v-if='right'>
      <slot name='next'>
        <i class='db-next icon iconfont icon-next'></i>
      </slot>
    </div>
    <!-- 播放顺序 -->
    <div @click='changeType' v-if='order'>
      <slot name='order' :type='Play.getType'>
        <div class='db-order-box'>
          <i class='db-order icon iconfont icon-shunxu' v-show='Play.getType() === 1'></i>
          <i class='db-order icon iconfont icon-danqu' v-show='Play.getType() === 3'></i>
          <i class='db-order icon iconfont icon-suiji' v-show='Play.getType() === 2'></i>
        </div>
      </slot>
    </div>
  </div>
</template>

<script>
import Play from './Play.js'
export default {
  name:'DbPlay',
  data() {
    return {
      Play:new Play(),
      paused:true,
    }
  },
  props:{
    data:{
      type:Array,
      default:function(){ return [] }
    },
    type:{
      type:Number,
      default:1,
    },
    left: Boolean,
    right: Boolean,
    order: Boolean,
    onPlay: Function,
    onPause: Function,
    onPre: Function,
    onNext: Function,
    onLoadedMetaData: Function,
    onMusicUpdate: Function,
  },
  watch:{
    type: function( val ) {
      this.Play.setType( val )
    }
  },
  methods: {
    onLisent() {  // 开启事件监听
      this.Play.onPlay( () => {
        this.paused = false
        this.onPlay instanceof Function ? this.onPlay() : ''
      })
      this.Play.onPause( () => {
        this.paused = true
        if( this.Play.getEnded() ) {
          if( this.Play.getType() === 1 )
            this.Play.nextMusic()
          else if( this.Play.getType() === 2 )
            this.Play.setPlay( this.Play.getRandom() )
          else if( this.Play.getType() === 3 )
            this.Play.playMusic()
        }
        this.onPause instanceof Function ? this.onPause() : ''
      })
      this.Play.onLoadedMetaData( ( currentTime, duration, data ) => {  //  当播放器加载完元数据的事件
        this.onLoadedMetaData instanceof Function ? this.onLoadedMetaData( currentTime, duration, data ) : ''
      })
      this.Play.onMusicUpdate( ( currentTime, duration, data ) => {   //  播放器播放位置改变监听
        this.onMusicUpdate instanceof Function ? this.onMusicUpdate( currentTime, duration, data ) : ''
      })
    },
    pre() {
      if( this.Play.getType() !== 2 )
        this.Play.preMusic()
      else 
        this.Play.setPlay( this.Play.getRandom() )
      this.onPre instanceof Function ? this.onPre() : ''
    },
    next() {
      if( this.Play.getType() !== 2 )
        this.Play.nextMusic()
      else 
        this.Play.setPlay( this.Play.getRandom() )
      this.onNext instanceof Function ? this.onNext() : ''
    },
    changeType() {
      if( this.Play.getType() + 1 > 3 ) this.Play.setType( 1 )
      else this.Play.setType( this.Play.getType() + 1 )
    },
    StartPlay() {
      this.Play.playMusic()
    }
  },
  created() {
    this.Play = new Play()
    this.paused = this.Play.getPaused()
    this.Play.setType( this.type )
    this.Play.setMusicList( this.data ) 
    this.onLisent()
  },
}
</script>

<style scoped>
@import './iconfont/iconfont.css';
.db-play-box {
  width:auto;
  display: flex;
  align-items: center;
}
.db-pre {
  margin-right:5px;
  font-size: 1.5em;
  color:rgb(105, 98, 98);
  cursor: pointer;
}
.db-next {
  margin-left:7px;
  font-size: 1.5em;
  color:rgb(105, 98, 98);
  cursor: pointer;
}
.db-start, .db-stop {
  color:rgb(105, 98, 98);
  font-size: 2.5em;
  cursor: pointer;
}
.db-order-box {
  width:1em;
  margin-left:5px;
}
.db-order {
  font-size: 1em;
  color:rgb(105, 98, 98);
  cursor: pointer;
}
</style>